<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Inline elements vertical align</title>

<link rel="stylesheet" href="../css/style.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="../script/libs/modernizr-2.0.6.min.js"></script>
<style>
.hidden {
    display: none;
}

.clearfix {
    clear: both;
}

nav ul {
    margin: 0;
    padding: 0;
    font-weight: bold;
}

.inline-container {
    position: relative;
    height: 200px;
}

.inline-container img, .topbar-right > * {
    border: 1px solid red;
}

.topbar-left {
    padding: 1em;
}

.topbar-right {
    position: absolute;
    top: 50%;
    right: -5px;
    margin-top: -25px;
}

.topbar-right > * {
    display: table-cell;
    vertical-align: middle;
}

.user-info {
    text-align: right;
    padding-right: 10px;
}

.user-name {
    font-weight: bold;
}

.user-logo {
    height: 51px;
    background-image: url("./images/userLogo_bg.png");
    background-position: 100% 0%;
}

.user-logo > * {
    vertical-align: middle;
}

.user-logo > img.user-avatar {
    width: 40px;
    height: 40px;
    margin-left: 5px;
}

.user-logo > img.user-brand {
    width: 120px;
    height: 20px;
    margin: 0 10px 0 5px;
}
</style>
</head>
<body>
  <header>
    <h1 style="float: left">Inline vertical centering</h1>
    <div class="clearfix"></div>
  </header>

  <nav id="navigation">
    <ul>
      <li id="version">Unknown jQuery Version</li>
      <li id="ui-version">Unknown jQuery UI Version</li>
    </ul>
  </nav>

  <div id="main" role="main">
    <p>God helps those who help themselves.</p>
    <div id="toolbar"></div>
    <div id="content">
      <div class="inline-container" style="background-color: skyBlue;">
        <div class="topbar-left">
          <p>The default vertical alignment on inline elements is the baseline of the parent element.<br />
            We must set vertical-align style to each inline element.
          </p>
        </div>
        <div class="topbar-right">
          <div class="user-info">
            <div class="user-info-text">Welcome, <span class="user-name">Roger</span>!</div>
            <div class="user-logout">logout</div>
          </div>
          <div class="user-logo">
            <img class="user-avatar" src="../images/avatar.png" />
            <img class="user-brand" src="../images/logo.png" />
          </div>
        </div>
      </div>
    </div>
    
  </div>

  <footer>
    <div>Copyright &copy; 2011. All rights reserved.</div>
  </footer>

  <script src="../script/libs/jquery-1.6.2.js"></script>
  <script>window.jQuery || document.write('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><\/script>')</script>
  <script src="../script/libs/jquery-ui-1.8.16.js"></script>
  <script>window.jQuery.ui || document.write('<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"><\/script>')</script>
  <script src="../script/libs/json2.js"></script>

  <!-- scripts concatenated and minified via ant build script-->
  <script defer src="../script/plugins.js"></script>
  <!-- end scripts-->

  <script>

  </script>
  <script>
    $(document).ready(function() {
        // version
        var version = $.fn.jquery;
        $('#version').html('jQuery: ' + version);
        var uiVersion = $.ui.version;
        $('#ui-version').html('jQuery UI: ' + uiVersion);
    });
  </script>
</body>
</html>